<template>
  <view class="exclusive">
    <view class="select_time" v-if="!$_.isEmpty(exclusive)">
      <view
        v-if="exclusive.nextHoliday"
        class="card hourCard holiday_exclusive"
      >
        {{ exclusive.nextHoliday }}</view
      >

      <view class="card hourCard">
        <view class="card_title">八字五行喜忌</view>
        <view class="card_content_title">
          {{ exclusive.wxxj.title }}
		  
        </view>
        <view class="card_content_title">
          {{ exclusive.wxxj.content }} 
		 
        </view>
		<view class="card_content_title">
		  {{ exclusive.wxxj.description }} 
		 
		</view>
      </view>
      <view class="card hourCard">
        <view class="card_title">幸运数字建议</view>
        <view class="card_content_title">
          {{ exclusive.xysz.title }}
        </view>
        <view class="card_content_title">
          {{ exclusive.xysz.content }}
        </view>
      </view>
      <view class="card hourCard">
        <view class="card_title">五行养生建议</view>
        <view style="font-size:28rpx;margin-top:20rpx" class="card_content"> {{ exclusive.wxys }} </view>
      </view>
    </view>
    <mask_login
      v-if="(!this.$store.state.user.hasLogin && showMask) || !birthDay"
    >
      <view @click="changeModal" class="login_box">{{
        !this.$store.state.user.hasLogin
          ? "登录后填写您的信息,解锁您的专属"
          : !birthDay
          ? "请填写生辰"
          : ""
      }}</view>
    </mask_login>
    <login
      ref="loginExclusive"
      @closeModal="changeModal"
      :loginModal="loginModal"
    ></login>
  </view>
</template>

<script>
import { getExclusiveApi } from "@/http/api";
import mask_login from "../../components/mask_login/mask_login.vue";
import login from "../../components/login/login.vue";

export default {
  components: {
    mask_login,
    login,
  },
  data() {
    return {
      birthDay: uni.getStorageSync("userInfo").birthDay || "",
      showMask: true,
      loginModal: false,
      exclusive: {},
    };
  },

  created() {
    this.getExclusive();
  },

  onLoad() {},

  computed: {},
  methods: {
    changeModal() {
      if (!this.$store.state.user.hasLogin) {
        this.showMask = false;
        this.loginModal = !this.loginModal;
        return;
      }

      if (!this.birthDay) {
        this.$refs.loginExclusive.closeModal();
      }
    },

    getExclusive() {
      //如果未登录,则不请求

      getExclusiveApi({
        birthDay: this.birthDay,
      }).then((res) => {
        this.exclusive = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
.lunar {
  font-size: 58rpx;
  font-weight: 500;
  color: #000;
  text-align: center;
  padding-top: 28rpx;
}

.bazi {
  display: flex;
  justify-content: center;
  font-size: 32rpx;

  color: #333;
  margin-top: 28rpx;

  > * {
    margin: 0 20rpx;
  }
}
.label-item {
  display: flex;
  margin-left: 12rpx;
}
.dayYi {
  display: flex;
}
.Yi-label {
  font-size: 32rpx;
  color: #333;
  margin-right: 20rpx;
}
.card {
  background: #fff;
  border: 1px solid #ca4336;
  border-radius: 12rpx;
  padding: 26rpx;
  font-size: 30rpx;
}
.hourCard {
  margin-top: 28rpx;
}
.select_time {
  padding: 10rpx 30rpx;
}
.luck_detail {
  padding-top: 28rpx;
}
.holiday_exclusive {
  background: #ca4336;
  font-size: 24rpx;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login_box {
  width: 90vw;
  height: 80rpx;
  border-radius: 12rpx;
  background: #fff;
}
.login_box {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  z-index: 4;
  //灰色阴影
  color: #ca4336;
  box-shadow: 0 0 10px #666;
}
.card_title {
  font-size: 30rpx;
  color: #262626;
}

.card_content_title {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999999;
  line-height: 36rpx;
}
.card_content {
  font-size: 20rpx;
  color: #999999;
  line-height: 36rpx;
}
.exclusive {
  height: 100vh;
  padding-bottom: 120rpx;
}
</style>